<template>
  <div class="room">
    <van-nav-bar left-arrow @click-left="onClickLeft">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
      <template #title>
        <van-tabs>
          <van-tab title="出租"></van-tab>
          <van-tab title="求租"></van-tab>
        </van-tabs>
      </template>
    </van-nav-bar>
    <van-dropdown-menu>
      <van-dropdown-item v-model="value1" :options="option1" />
      <van-dropdown-item v-model="value2" :options="option2" />
      <van-dropdown-item v-model="value3" :options="option3" />
      <van-dropdown-item v-model="value4" :options="option4" />
    </van-dropdown-menu>
    <chuzu ref="scroll" @pos="contentpos" />
    <p class="noMore">没有更多啦!!!</p>
    <div class="topt" @click="topback" v-show="isShowTop">
      <img src="../assets/img/top.png" alt />
    </div>
  </div>
</template>

<script>
import chuzu from "./Room/Chuzu.vue";
export default {
  data() {
    return {
      value1: 0,
      value2: "a",
      value3: "10",
      value4: "j",
      switch1: false,
      switch2: false,
      isShowTop: false,
      option1: [
        { text: "地铁", value: 0 },
        { text: "1号线", value: 1 },
        { text: "2号线", value: 2 },
        { text: "3号线", value: 3 },
        { text: "4号线", value: 4 },
        { text: "5号线", value: 5 },
      ],
      option2: [
        { text: "区域", value: "a" },
        { text: "西湖区", value: "b" },
        { text: "上城区", value: "c" },
        { text: "余杭区", value: "d" },
        { text: "江干区", value: "e" },
        { text: "下城区", value: "f" },
      ],
      option3: [
        { text: "租金", value: "10" },
        { text: "不限", value: "11" },
        { text: "1500元一下", value: "12" },
        { text: "1500-2000元", value: "13" },
        { text: "2000-3000元", value: "14" },
        { text: "3000元以上", value: "15" },
      ],
      option4: [
        { text: "筛选", value: "j" },
        { text: "默认", value: "k" },
        { text: "价格↑", value: "h" },
        { text: "价格↓", value: "l" },
      ],
    };
  },
  components: {
    chuzu,
  },
  methods: {
    onClickLeft() {
      this.$router.push("/home");
    },
    topback() {
      this.$refs.scroll.scrollTo(0, 0, 500);
    },
    contentpos(position) {
      // console.log(position);
      this.isShowTop = -position.y > 800;
    },
  },
};
</script>
<style lang="less">
.room {
  position: relative;
  .van-nav-bar__content {
    .van-icon {
      color: #000;
    }
    .van-nav-bar__title {
      span {
        font-size: 18px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #4e4e4e;
        padding: 0 10px;
      }
    }
  }
  .noMore {
    position: fixed;
    bottom: 0;
    left: 10px;
    z-index: -10;
    font-size: 14px;
  }
  .topt {
    position: fixed;
    right: 8px;
    bottom: 45px;
    z-index: 9;
    width: 45px;
    height: 60px;
    background: #666;
    padding: 7px;
    // border-radius: 50%;
    overflow: hidden;
    img {
      text-align: center;
      width: 30px;
      height: 45px;
    }
  }
}
</style>
